<template>
	<view class="ball">
		<player :key="1" ref="player" :show="show" @colse="colse"></player>
		<template v-if="isBall">
			<l-drag  ref="lDrag" @btnClick='btnClick' :boundary="{top: 0,left: 0,bottom: 0,right: 0}"
				:initLocation="{left: 600, top: 1000 }">
			</l-drag>
		</template>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				show:false
			}
		},
		computed: {
			...mapState(["isBall","key"]),
		},
		mounted() {
			if (this.$refs.player && this.isBall) {
				this.$refs.player.setIntervalT();
			}
		},
		methods:{
			...mapMutations(['setKey']),
			btnClick() {
			this.show = true;
			// console.log("this.....", this.isPlay);
			
			this.$refs.player.getList();
			
			this.setKey();
			},
			colse() {
				this.show = false;
			}
		}
	}
</script>

<style scoped lang="scss">
</style>